<template>
	<view>
		<u-form :model="userInfoP" ref="uForm">
			<!-- 头像 -->
			<u-form-item @click="chooseAvatar" label="头像" label-width="130rpx" prop="avatar"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<image v-if="userInfoP.avatar" :src="userInfoP.avatar"></image>
				<image v-else src="../../../static/images/my/001.png"></image>
				<!-- 	<uni-file-picker :imageStyles="imageStyles" file-mediatype="image" disable-preview :del-icon="false"
					return-type="object" @success="success"></uni-file-picker> -->
			</u-form-item>
			<!-- 名字 -->
			<u-form-item label="昵称" label-width="130rpx" prop="nickname"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<u-input v-model="userInfoP.nickname"
					:custom-style="{fontSize:'16rpx',color:'#000',textAlign:'right',paddingRight:'50rpx'}" />
			</u-form-item>
			<!-- 性别 -->
			<u-form-item label="性别" label-width="130rpx" prop="sex"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<u-input v-model="userInfoP.sex" disabled placeholder="请选择性别"
					:custom-style="{fontSize:'16rpx',color:'#000',textAlign:'right',paddingRight:'50rpx'}"
					@click="showSex=true" />
			</u-form-item>
			<!-- 生日 -->
			<u-form-item label="生日" label-width="130rpx" prop="birthday"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<picker mode="date" :value="userInfoP.birthday" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="uni-input">{{userInfoP.birthday}}</view>
				</picker>
			</u-form-item>
			<!-- 地址 -->
			<u-form-item label="地址" label-width="130rpx" prop="addr"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<view class="uni-input" @click="flag=true">{{userInfoP.addr}}</view>
				<AddressSelected v-model:flag="flag" :addr_code="userInfoP.addr_code" @changeAddress="changeAddress"></AddressSelected>
			</u-form-item>
			<!-- 手机号 -->
			<u-form-item label="手机号" label-width="130rpx"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<u-input v-model="mobile" disabled
					:custom-style="{fontSize:'16rpx',color:'#000',textAlign:'right',paddingRight:'50rpx'}" />
			</u-form-item>
			<!-- 选择性别的 -->
			<u-action-sheet :tips="tips" :list="list" v-model="showSex" @click="actionSheetCallback"></u-action-sheet>
		</u-form>
		<u-button style="backgroundColor:#fdd100; color: #fff; margin: 20rpx 50rpx;" shape="circle" @click="sure">确定
		</u-button>
	</view>
</template>

<script>
	// 校验 
	import rules from './rules.js'
	import {
		userStore
	} from '@/stores/userInfo/userInfo.js'
	import {
		user
	} from '@/api'
	import baseToFile from '@/utils/baseToFile.js'
	import  cityData  from '@/components/areadata/areadata'
	import AddressSelected from '@/components/areadata/AddressSelected.vue'
	export default {
		data() {
			return {
				flag: false,
				userInfoP: {
					avatar: '',
					nickname: '',
					sex: '',
					birthday: '2002-5-3',
					addr: '',
					addr_code: [],
					uid: ''
				},
				// 默认显示的地址
				address: '',
				mobile: '',
				tips: {
					text: '请选择性别',
					color: '#909399',
					fontSize: 24
				},
				list: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				showSex: false,
				imageStyles: {
					width: 50,
					height: 50,
					border: {
						radius: '50%'
					}
				},
				rules,
			}
		},
		components: {
			AddressSelected
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		created() {
			// // 监听从裁剪页发布的事件，获得裁剪结果
				uni.$on('uAvatarCropper', path => {
						// 可以在此上传到服务端
						uni.uploadFile({
							url: 'http://gmall-h5-api.atguigu.cn/admin/product/fileUpload',
							filePath: path,
							name:'file',
							complete: (res) => {
								if(res.statusCode === 200) {
									res.data = JSON.parse(res.data)
									this.$nextTick(()=> {
										this.userInfoP.avatar = res.data.data
										uni.$u.toast('上传成功')
									})
								
								}else {
									uni.$u.toast('上传失败')
								}
							}
						});
				});
		},
		onReady() {
			// 校验
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			let user = userStore()
			let {
				_id,
				username,
				addr_code,
				addr,
				avatar,
				birthday,
				nickname,
				sex
			} = user.userInfo
			this.mobile = username
			// 渲染参数
			this.userInfoP.uid = _id
			this.userInfoP.addr_code = Object.values(addr_code)
			this.userInfoP.addr = addr
			this.userInfoP.avatar = avatar
			this.address = this.userInfoP.addr_code[2]
			this.userInfoP.birthday = birthday
			this.userInfoP.nickname = nickname
			this.userInfoP.sex = sex
		},
		methods: {
			// changeAddress 更改地址
			changeAddress(e){
				this.userInfoP.addr  = ''
				this.userInfoP.addr_code = []
				this.userInfoP.addr_code.push(...e.address)
				this.userInfoP.addr = e.address_text
			},
			onnodeclick(node) {},
			// 上传图片
			fillUpload() {
				console.log(this.$refs.file)
			},
			// 选择性别
			actionSheetCallback(e) {
				this.userInfoP.sex = this.list[e].text
			},
			// 日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 修改
			bindDateChange: function(e) {
				this.userInfoP.birthday = e.detail.value
			},
			success(e) {

				let {
					tempFilePaths
				} = e
				if (tempFilePaths.length >= 1) {
					uni.$u.toast('上传成功')
					this.userInfoP.avatar = tempFilePaths[0]
				} else {
					uni.$u.toast('上传失败,请重新上传')
				}
			},
			sure() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						user.reqEditUserInfo(this.userInfoP).then((res) => {
							if (res.code === 1) {
								uni.$u.toast(res.msg)
								uni.navigateBack()
								let user = userStore()
								user.getUserInfo()
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 跳转到裁切页面
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .input-value-border {
		border: none;
		text-align: right;
	}

	::v-deep .selected-area {
		display: block;
	}

	::v-deep .selected-list {
		justify-content: flex-end;
	}

	::v-deep .text-color {
		color: #000;
	}

	::v-deep .input-arrow {
		display: none;
	}

	::v-deep .u-form-item--right__content__slot {
		justify-content: flex-end;
	}

	.uni-input {
		margin-right: 50rpx;
		color: #000;
		font-size: 20rpx;
	}

	::v-deep .file-picker__box {
		position: absolute;
		top: 0;
		right: 60rpx;
		opacity: 0;
	}

	image {
		top: 10rpx;
		right: 70rpx;
		position: absolute;
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}
</style>
